<template>
   <div>
   <div class="demo-image">
    <!--引了下assets的图片-->
  <div class="block" v-for="item in testList" :key="item.id">
    <!--图片外嵌套按钮，实现点击出现订单表--> 
    <el-button type="text"  @click="dialogFormVisible = true">
      <el-image style="width: 300px; height: 200px" :src="item.idView" fit="fill"></el-image>
    </el-button>

    <!--订单页面-->
    <el-dialog title="订单页面" :visible.sync="dialogFormVisible">
  <el-form :model="ruleForm" ref="ruleForm" label-width="100px">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="ruleForm.name" autocomplete="off"></el-input>
    </el-form-item>  
    <el-form-item label="手机号" prop="phone">
      <el-input v-model="ruleForm.phone" auto-complete="false"></el-input>
    </el-form-item>
    <el-form-item label="租车天数" prop="days">
      <el-input-number  v-model="ruleForm.days" :min="1" ></el-input-number>
    </el-form-item>
 </el-form>
  <div class="price">总价<span v-html="'\u00a0\u00a0\u00a0'"></span><span >{{sumPrice}}</span></div> 
  
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogFormVisible = false" >确 定</el-button>
  </div>
</el-dialog>

    <div class="demonstration"><span >{{ currentDate }}</span></div>   
  </div>
</div>

</div> 
</template>

<script>

export default {
   
    data() {
      return {
         ruleForm: {
          username: '',
          phone: '',
          days: ''
        },
        //assets图片
        testList: [
                {id:0,idView:require("@/assets/01.jpg")},
                {id:1,idView:require("@/assets/02.jpg")},
                {id:2,idView:require("@/assets/03.jpg")},
                {id:3,idView:require("@/assets/04.jpg")}            
            ],
        currentDate: new Date(),
        dialogFormVisible: false,
      
      }
    }

}
</script>

<style>
.el-select{
    margin-left:5%;
}
.block{
  margin-left:6%;
  margin-top:2%;
  float:left;
}

.demonstration{
  margin-left:0%;
  font-size:4px;
}
.price{
  position: absolute;
  left:12%;
}

</style>